<template>
  <el-header class="header">
    <div class="logo">
      <img src="@/assets/images/logo.png" alt="Logo" />
    </div>
    <div class="title" @click="router.push('/')">
      广西图书馆
    </div>
    <el-button type="primary" v-if="currentUser.username !== '游客'" @click="toggleBookRecommendation">图书馆AI大模型助手</el-button>
    <nav class="nav">
      <div>
        <el-link href="/home">首页</el-link>
        <el-link href="/notices">公告</el-link>
        <el-link href="/books">图书</el-link>
      </div>

      <div v-if="currentUser.username !== '游客' && currentUser.userType === 'book_admin'">
        <el-link href="/book-admin">管理员后台</el-link>
      </div>

      <div v-if="currentUser.username !== '游客' && currentUser.userType === 'admin'">
        <el-link href="/admin">系统后台</el-link>
      </div>

      <div v-if="currentUser.username !== '游客' && currentUser.userType === 'user'">
        <el-link href="/user-dashboard">用户个人中心</el-link>
      </div>
    </nav>
    <el-divider direction="vertical" />
    <el-popover
      placement="bottom"
      trigger="hover"
      :width="180"
      content=""
    >
      <template #reference>
        <div class="logo">
          <img src="@/assets/images/user.png" alt="user" />
        </div>
      </template>
      <div class="popover-content">
        <el-text>当前账户：</el-text>
        <el-text>{{ currentUser.username }}[{{ userTypeText }}]</el-text>
        <div>
          <el-button class="logout-button" v-if="currentUser.username !== '游客'" @click="handleLogout">注销</el-button>
          <el-button class="logout-button" v-if="currentUser.username === '游客'" @click="handleLogin">登录</el-button>
        </div>
      </div>
    </el-popover>

    <BookRecommendation :visible="isBookRecommendationVisible" @close="toggleBookRecommendation" />
  </el-header>
</template>



<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import BookRecommendation from "@/views/BookRecommendation.vue";

// 获取路由实例
const router = useRouter();
const store = useStore();

// 计算属性获取 currentUser 和 isBookRecommendationVisible
const currentUser = computed(() => store.state.currentUser);
const isBookRecommendationVisible = computed(() => store.state.isBookRecommendationVisible);
const userTypeText = computed(() => {
  switch (currentUser.value.userType) {
    case 'user':
      return '用户';
    case 'book_admin':
      return '图书管理员';
    case 'admin':
      return '系统管理员';
    default:
      return '未知类型';
  }
});

// 处理注销
const handleLogout = () => {
  localStorage.clear(); // 清除所有登录信息
  store.dispatch('updateUser', { username: '游客', userType: 'user' }); // 更新用户信息
  router.push('/login'); // 跳转回登录页面
};

const handleLogin = () => {
  router.push('/login');
};

// 切换图书推荐弹窗
const toggleBookRecommendation = () => {
  store.dispatch('toggleBookRecommendation');
};
</script>



<style scoped>
/* 使用 el-header 默认样式，覆盖自定义样式 */

/* 自定义 Logo */
.logo img {
  height: 40px;
  border-radius: 50%;
}

/* 新增 Title 样式 */
.title {
  font-family: 'Great Vibes', cursive; /* 应用 Great Vibes 字体 */
  font-size: 24px;
  color: #ffd72e;
  font-weight: bold;
  margin: 0 20px;
  cursor: pointer;
}

/* 自定义导航栏 */
.nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1; /* 确保导航链接右对齐 */
}

.nav a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  margin-left: 20px;
}

.nav a:hover {
  color: #ffcc00;
}

/* 覆盖 el-header 默认样式 */
.header {
  background: url('@/assets/images/patterns.png') repeat; /* 使用 patterns.png 图案并重复铺满 */
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 弹出内容样式 */
.popover-content {
  padding: 10px;
  background-color: #fff;
}

.popover-content .el-text {
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
  padding: 5px;
  display: inline-block;
  width: 100%;
}

/* 登出按钮样式 */
.logout-button {
  width: 100%;
  padding: 10px;
  border-radius: 0 0 4px 4px;
  border: none;
  background-color: #ffcc00;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

</style>


